<template>
  <div>
    <el-dialog
      width="80%"
      top="2vh"
      title="查看大数据"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div class="bigdata-box" v-loading="diaLoading" element-loading-text="正在查询中...">
        <div class="data-box">
          <div class="box-title">用户信息</div>
          <el-descriptions
            :column="2"
            border
            :labelStyle="{width: '140px',backgroundColor: '#f3f5fc',color:'#333'}"
          >
            <el-descriptions-item label="姓名">{{ baseInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ baseInfo.gender }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ baseInfo.age }}</el-descriptions-item>
            <el-descriptions-item label="身份证号码">{{ baseInfo.ident_number }}</el-descriptions-item>
            <el-descriptions-item label="户籍">{{ baseInfo.ident_number_address }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ baseInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="手机号归属地">{{ baseInfo.phone_address }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="risk-agree">
          <span>风险建议：</span>
          <span :style="{color:riskColor}">{{ cphs.verify_recomment }}</span>
        </div>
        <div class="process-box">
          <div class="process-area">
            <div class="flex">
              <div :style="{width: corsorMove}"></div>
              <div class="cursor-box" v-if="cphs.score_norm_explain">
                <div class="cursor" :style="{backgroundColor:riskColor}">{{cphs.score_norm_explain}}</div>
                <div class="cursor-icon" :style="{borderTopColor:riskColor}"></div>
              </div>
            </div>
            <div class="process-line flex">
              <div class="process-cd cd-1" style="flex:1;color:#fff;background-color:#72d13d;">极低风险</div>
              <div class="process-cd cd-2" style="flex:1;color:#fff;background-color:#36cfc8;">低风险</div>
              <div class="process-cd cd-3" style="flex:1;color:#fff;background-color:#41abff;">中风险</div>
              <div class="process-cd cd-4" style="flex:1;color:#fff;background-color:#feab40;">高风险</div>
              <div class="process-cd cd-5" style="flex:1;color:#fff;background-color:#fe4142;">极高风险</div>
            </div>
          </div>
          <!-- <div>群体统计逾期率预测：70%</div> -->
          <div
            style="font-size:12px;margin-top:48px;"
          >注：分值在【450，750】之间，得分越低，风险越高；【450，585）建议拒绝，【585，640）建议审核，【640，750】建议通过。</div>
        </div>
        <div class="data-box">
          <div class="box-title">风险标注</div>
          <el-table
            :data="cphs.hit_risk_tagging"
            border
            style="width: 100%"
            :header-cell-style="headStyleFun"
            empty-text="暂无数据"
          >
            <el-table-column align="center" type="index" label="序号" width="140"></el-table-column>
            <el-table-column align="center" prop="summary" label="风险点" min-width="200"></el-table-column>
          </el-table>
        </div>
        <div class="data-box">
          <div class="box-title">身份信息核验</div>
          <el-descriptions :column="1" border>
            <el-descriptions-item
              label="身份证信息是否一致"
              :labelStyle="{width: '240px',backgroundColor: '#f3f5fc',color:'#333'}"
            >{{ identInfo.identity_two_elements === '' ? '--': (identInfo.identity_two_elements === '01' ? '不一致':'一致') }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="data-box">
          <div class="box-title">运营商信息</div>
          <el-descriptions
            :column="4"
            border
            direction="vertical"
            :contentStyle="desItemStyle"
            :labelStyle="desLabelStyle"
          >
            <el-descriptions-item
              label="运营商核验"
            >{{ identInfo.network_triple_elements === '' ? '手机号异常/虚拟号/携号转网': (identInfo.network_triple_elements === '01' ? '不一致':'一致') }}</el-descriptions-item>
            <el-descriptions-item label="在网时长">{{ timeOnline }}</el-descriptions-item>
            <el-descriptions-item label="在网状态">{{ identInfo.phone_status }}</el-descriptions-item>
            <el-descriptions-item label="所属运营商">{{ operatorType }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="data-box">
          <div class="box-title">宝系健康度</div>
          <div class="flex my-flex">
            <div ref="grade" id="grade"></div>
            <div>注：宝系健康度共分为A/B/C/D/E 5个等级，A等级最高，表示用户质量最好，E等级最差，表示用户质量最差。</div>
          </div>
        </div>
        <div class="data-box">
          <div class="box-title">不良行为检测</div>
          <el-descriptions
            :column="5"
            border
            direction="vertical"
            :contentStyle="desItemStyle"
            :labelStyle="desLabelStyle"
          >
            <el-descriptions-item label="是否涉案">{{ focusListCheck.hit6 === 1 ? '是' : '否' }}</el-descriptions-item>
            <el-descriptions-item label="是否在逃">{{ focusListCheck.hit5 === 1 ? '是' : '否' }}</el-descriptions-item>
            <el-descriptions-item label="是否涉毒">{{ focusListCheck.hit34 === 1 ? '是' : '否' }}</el-descriptions-item>
            <el-descriptions-item label="是否前科">{{ focusListCheck.hit2 === 1 ? '是' : '否' }}</el-descriptions-item>
            <el-descriptions-item label="其他">{{ focusListCheck.hit1 === 1 ? '是' : '否' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="data-box">
          <div class="box-title">风险名单检测</div>
          <el-descriptions
            :column="5"
            border
            direction="vertical"
            :contentStyle="desItemStyle"
            :labelStyle="desLabelStyle"
          >
            <el-descriptions-item
              label="信用租赁风险名单"
            >{{ riskListCheck.credit_rent === 1 ? '命中':'未命中' }}</el-descriptions-item>
            <el-descriptions-item label="特殊关注名单">{{ riskListCheck.result_xd === 1 ? '命中':'未命中' }}</el-descriptions-item>
            <el-descriptions-item
              label="虚拟号码库"
            >{{ riskListCheck.phone_hit_xjhm === 1 ? '命中':'未命中' }}</el-descriptions-item>
          </el-descriptions>
          <div style="height:20px"></div>
          <el-descriptions
            :column="5"
            border
            direction="vertical"
            :contentStyle="desItemStyle"
            :labelStyle="desLabelStyle"
          >
            <el-descriptions-item
              label="通信小号库"
            >{{ riskListCheck.phone_hit_txxh === 1 ? '命中':'未命中' }}</el-descriptions-item>
            <el-descriptions-item
              label="归属地位于高风险集中地区"
            >{{ riskListCheck.census_register_high_risk_area === 1 ? '命中':'未命中' }}</el-descriptions-item>
            <el-descriptions-item
              label="车辆租赁违约名单"
            >{{ riskListCheck.idcard_hit_clzlwy === 1 ? '命中':'未命中' }}</el-descriptions-item>
            <el-descriptions-item
              label="故意违章乘车名单"
            >{{ riskListCheck.idcard_hit_gywzcc === 1 ? '命中':'未命中' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="data-box">
          <div class="box-title">网贷行为评估</div>
          <div class="label-box">
            <div class="flex t-box">
              <div class="title"></div>
              <div>注册记录</div>
            </div>
            <el-descriptions
              :column="2"
              border
              :labelStyle="{width: '240px',backgroundColor: '#f3f5fc',color:'#333'}"
            >
              <el-descriptions-item label="消金类机构注册次数">{{ registerHistory.D432 }}</el-descriptions-item>
              <el-descriptions-item label="小贷类机构注册次数">{{ registerHistory.D436 }}</el-descriptions-item>
              <el-descriptions-item label="银行类机构注册次数">{{ registerHistory.D428 }}</el-descriptions-item>
              <el-descriptions-item label="最近一次信贷注册所在月份">{{ registerHistory.D160 }}</el-descriptions-item>
            </el-descriptions>
            <div class="table-box">
              <table width="100%" cellspacing="0">
                <tr>
                  <th></th>
                  <th>近1个月</th>
                  <th>近3个月</th>
                  <th>近6个月</th>
                  <th>近12个月</th>
                  <th>近24个月</th>
                </tr>
                <tr>
                  <td>机构注册次数</td>
                  <td>{{ registerHistory.D384 }}</td>
                  <td>{{ registerHistory.D159 }}</td>
                  <td>{{ registerHistory.D158 }}</td>
                  <td>{{ registerHistory.D157 }}</td>
                  <td>{{ registerHistory.D156 }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="label-box">
            <div class="flex t-box">
              <div class="title"></div>
              <div>查询记录</div>
            </div>
            <div class="table-box">
              <table width="100%" cellspacing="0">
                <tr>
                  <th></th>
                  <th>近7天</th>
                  <th>近30天</th>
                  <th>近90天</th>
                </tr>
                <tr>
                  <td>机构查询总数</td>
                  <td>{{ personalLoanDemand.d7_apply_setup_time }}</td>
                  <td>{{ personalLoanDemand.m1_apply_setup_time }}</td>
                  <td>{{ personalLoanDemand.m3_apply_setup_time }}</td>
                </tr>
                <tr>
                  <td>P2P平台查询次数</td>
                  <td>{{ personalLoanDemand.d7_apply_setup_time_p2pwd }}</td>
                  <td>{{ personalLoanDemand.m1_apply_setup_time_p2pwd }}</td>
                  <td>{{ personalLoanDemand.m3_apply_setup_time_p2pwd }}</td>
                </tr>
                <tr>
                  <td>信用卡查询次数</td>
                  <td>{{ personalLoanDemand.d7_apply_setup_time_xyk }}</td>
                  <td>{{ personalLoanDemand.m1_apply_setup_time_xyk }}</td>
                  <td>{{ personalLoanDemand.m3_apply_setup_time_xyk }}</td>
                </tr>
                <tr>
                  <td>一般消费分期查询次数</td>
                  <td>{{ personalLoanDemand.d7_apply_setup_time_ybxffq }}</td>
                  <td>{{ personalLoanDemand.m1_apply_setup_time_ybxffq }}</td>
                  <td>{{ personalLoanDemand.m3_apply_setup_time_ybxffq }}</td>
                </tr>
                <tr>
                  <td>大型消费金融查询次数</td>
                  <td>{{ personalLoanDemand.d7_apply_setup_time_dxxfjr }}</td>
                  <td>{{ personalLoanDemand.m1_apply_setup_time_dxxfjr }}</td>
                  <td>{{ personalLoanDemand.m3_apply_setup_time_dxxfjr }}</td>
                </tr>
                <tr>
                  <td>小额贷款查询次数</td>
                  <td>{{ personalLoanDemand.d7_apply_setup_time_xedkgs }}</td>
                  <td>{{ personalLoanDemand.m1_apply_setup_time_xedkgs }}</td>
                  <td>{{ personalLoanDemand.m3_apply_setup_time_xedkgs }}</td>
                </tr>
                <tr>
                  <td>其他类型查询次数</td>
                  <td>{{ personalLoanDemand.d7_apply_setup_time_other }}</td>
                  <td>{{ personalLoanDemand.m1_apply_setup_time_other }}</td>
                  <td>{{ personalLoanDemand.m3_apply_setup_time_other }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="label-box">
            <div class="flex t-box">
              <div class="title"></div>
              <div>申请记录</div>
            </div>
            <el-descriptions
              :column="2"
              border
              :labelStyle="{width: '240px',backgroundColor: '#f3f5fc',color:'#333'}"
            >
              <el-descriptions-item label="近12个月申请机构总数">{{ personalLoanS.apply_mechanism_number }}</el-descriptions-item>
              <el-descriptions-item
                label="消费分期类申请机构数"
              >{{ personalLoanS.consumer_apply_mechanism_number }}</el-descriptions-item>
              <el-descriptions-item
                label="网络贷款类申请机构数"
              >{{ personalLoanS.network_loan_apply_mechanis_mnumber }}</el-descriptions-item>
              <el-descriptions-item label="最近一次申请日期">{{ personalLoanS.last_apply_time }}</el-descriptions-item>
              <el-descriptions-item
                label="距离最近一次申请日期已有(天)"
              >{{ personalLoanS.last_apply_time_distance }}</el-descriptions-item>
            </el-descriptions>
            <div class="table-box">
              <table width="100%" cellspacing="0">
                <tr>
                  <th></th>
                  <th>近1个月</th>
                  <th>近3个月</th>
                  <th>近6个月</th>
                  <th>近12个月</th>
                </tr>
                <tr>
                  <td>申请次数</td>
                  <td>{{ personalLoanS.apply_time1 }}</td>
                  <td>{{ personalLoanS.apply_time3 }}</td>
                  <td>{{ personalLoanS.apply_time6 }}</td>
                  <td>{{ personalLoanS.apply_time12 }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="label-box">
            <div class="flex t-box">
              <div class="title"></div>
              <div>放款记录</div>
            </div>
            <el-descriptions
              :column="2"
              border
              :labelStyle="{width: '240px',backgroundColor: '#f3f5fc',color:'#333'}"
            >
              <el-descriptions-item label="放款机构总数">{{ personalLoanF.lenders }}</el-descriptions-item>
              <el-descriptions-item label="消费分期类放款机构数">{{ personalLoanF.cflenders }}</el-descriptions-item>
              <el-descriptions-item label="网络贷款类申请机构数">{{ personalLoanF.nllenders }}</el-descriptions-item>
              <el-descriptions-item label="最近一次放款日期">{{ personalLoanF.lend_time }}</el-descriptions-item>
              <el-descriptions-item label="距离最近一次放款日期已有(天)">{{ personalLoanF.lend_time_distance }}</el-descriptions-item>
            </el-descriptions>
            <div class="table-box">
              <table width="100%" cellspacing="0">
                <tr>
                  <th></th>
                  <th>近1个月</th>
                  <th>近3个月</th>
                  <th>近6个月</th>
                  <th>近12个月</th>
                  <th>近24个月</th>
                </tr>
                <tr>
                  <td>放款次数</td>
                  <td>{{ personalLoanF.lend_number1 }}</td>
                  <td>{{ personalLoanF.lend_number3 }}</td>
                  <td>{{ personalLoanF.lend_number6 }}</td>
                  <td>{{ personalLoanF.lend_number12 }}</td>
                  <td>{{ personalLoanF.lend_number24 }}</td>
                </tr>
                <tr>
                  <td>放款金额</td>
                  <td>{{ personalLoanF.lend_money1 }}</td>
                  <td>{{ personalLoanF.lend_money3 }}</td>
                  <td>{{ personalLoanF.lend_money6 }}</td>
                  <td>{{ personalLoanF.lend_money12 }}</td>
                  <td>{{ personalLoanF.lend_money24 }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="label-box">
            <div class="flex t-box">
              <div class="title"></div>
              <div>还款记录</div>
            </div>
            <div class="table-box">
              <table width="100%" cellspacing="0">
                <tr>
                  <th></th>
                  <th>近1个月</th>
                  <th>近3个月</th>
                  <th>近6个月</th>
                  <th>近12个月</th>
                  <th>近24个月</th>
                </tr>
                <tr>
                  <td>履约次数</td>
                  <td>{{ personalLoanH.repay_succ1 }}</td>
                  <td>{{ personalLoanH.repay_succ3 }}</td>
                  <td>{{ personalLoanH.repay_succ6 }}</td>
                  <td>{{ personalLoanH.repay_succ12 }}</td>
                  <td>{{ personalLoanH.repay_succ24 }}</td>
                </tr>
                <tr>
                  <td>履约金额</td>
                  <td>{{ personalLoanH.repay_money1 }}</td>
                  <td>{{ personalLoanH.repay_money3 }}</td>
                  <td>{{ personalLoanH.repay_money6 }}</td>
                  <td>{{ personalLoanH.repay_money12 }}</td>
                  <td>{{ personalLoanH.repay_money24 }}</td>
                </tr>
                <tr>
                  <td>还款异常次数</td>
                  <td>{{ personalLoanH.repay_fail1 }}</td>
                  <td>{{ personalLoanH.repay_fail3 }}</td>
                  <td>{{ personalLoanH.repay_fail6 }}</td>
                  <td>{{ personalLoanH.repay_fail12 }}</td>
                  <td>{{ personalLoanH.repay_fail24 }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="label-box">
            <div class="flex t-box">
              <div class="title"></div>
              <div>历史逾期记录</div>
            </div>
            <el-descriptions
              :column="2"
              border
              :labelStyle="{width: '240px',backgroundColor: '#f3f5fc',color:'#333'}"
            >
              <el-descriptions-item
                label="近6个月逾期机构总数"
              >{{ personalOverdueHistory.overdue_mechanism_number }}</el-descriptions-item>
              <el-descriptions-item label="近6个月逾期总次数">{{ personalOverdueHistory.counts }}</el-descriptions-item>
              <el-descriptions-item
                label="近6个月逾期未结清次数"
              >{{ personalOverdueHistory.uncleared_counts }}</el-descriptions-item>
              <el-descriptions-item label="近6个月逾期总金额(元)">{{ overMoney }}</el-descriptions-item>
              <!-- <el-descriptions-item label="近6个月逾期总金额(元)">{{ personalOverdueHistory.overdue_money }}</el-descriptions-item> -->
            </el-descriptions>
            <el-table
              :data="personalOverdueHistory.datalist"
              border
              style="width: 100%;margin:10px 0;"
              :header-cell-style="headStyleFun"
              empty-text="暂无数据"
            >
              <el-table-column align="center" type="index" label="序号" width="90"></el-table-column>
              <el-table-column align="center" prop="amount" label="逾期金额区间(元)" min-width="160"></el-table-column>
              <el-table-column align="center" prop="date" label="逾期时间" min-width="120"></el-table-column>
              <el-table-column align="center" prop="count" label="逾期时长" min-width="120"></el-table-column>
              <el-table-column align="center" prop="settlementstr" label="是否结清" min-width="120"></el-table-column>
            </el-table>
            <div
              style="font-size:12px;margin-top:8px;"
            >注：逾期时长，S/M表示逾期的期数。S代表现金贷的期数，1期=7天，S0表示不到7天，S1代表7-14天，以此类推；M代表消费分期的期数，1期=30天，M0表示不到30天，M1代表30-60天，以此类推。</div>
          </div>
        </div>
        <div class="data-box">
          <div class="box-title">租赁申请行为</div>
          <div class="table-box">
            <table width="100%" cellspacing="0">
              <tr>
                <th></th>
                <th>近7天</th>
                <th>近1个月</th>
                <th>近3个月</th>
                <th>近6个月</th>
                <th>近12个月</th>
              </tr>
              <tr>
                <td>租赁申请机构数</td>
                <td>{{rentHistory.d7_apply_agency_time}}</td>
                <td>{{rentHistory.m1_apply_agency_time}}</td>
                <td>{{rentHistory.m3_apply_agency_time}}</td>
                <td>{{rentHistory.m6_apply_agency_time}}</td>
                <td>{{rentHistory.m12_apply_agency_time}}</td>
              </tr>
              <tr>
                <td>租赁申请次数</td>
                <td>{{rentHistory.d7_apply_time}}</td>
                <td>{{rentHistory.m1_apply_time}}</td>
                <td>{{rentHistory.m3_apply_time}}</td>
                <td>{{rentHistory.m6_apply_time}}</td>
                <td>{{rentHistory.m12_apply_time}}</td>
              </tr>
              <tr>
                <td>夜间租赁申请机构数</td>
                <td>{{rentHistory.d7_night_apply_agency_time}}</td>
                <td>{{rentHistory.m1_night_apply_agency_time}}</td>
                <td>{{rentHistory.m3_night_apply_agency_time}}</td>
                <td>{{rentHistory.m6_night_apply_agency_time}}</td>
                <td>{{rentHistory.m12_night_apply_agency_time}}</td>
              </tr>
              <tr>
                <td>夜间租赁申请次数</td>
                <td>{{rentHistory.d7_night_apply_time}}</td>
                <td>{{rentHistory.m1_night_apply_time}}</td>
                <td>{{rentHistory.m3_night_apply_time}}</td>
                <td>{{rentHistory.m6_night_apply_time}}</td>
                <td>{{rentHistory.m12_night_apply_time}}</td>
              </tr>
            </table>
          </div>
          <el-descriptions
            :column="5"
            border
            direction="vertical"
            :contentStyle="desItemStyle"
            :labelStyle="desLabelStyle"
          >
            <el-descriptions-item label="同一身份证关联手机号数">{{ rentHistory.ident_contain_phone_ct }}</el-descriptions-item>
            <el-descriptions-item label="同一手机号关联身份证数">{{ rentHistory.phone_contain_ident_ct }}</el-descriptions-item>
            <el-descriptions-item label="最近一次申请时间">{{ rentHistory.ident_last_apply_time }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="data-box">
          <div class="box-title">关联风险检测</div>
          <el-descriptions
            :column="2"
            border
            direction="vertical"
            :contentStyle="desItemStyle"
            :labelStyle="desLabelStyle"
          >
            <el-descriptions-item
              label="3个月身份证关联手机号数"
            >{{ relevanceRiskCheck.m3_idcard_to_phone_time }}</el-descriptions-item>
            <el-descriptions-item
              label="3个月手机号关联身份证数"
            >{{ relevanceRiskCheck.m3_phone_to_idcard_time }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="data-box">
          <div class="box-title">法院风险信息</div>
          <el-table
            :data="courtRiskInfoList"
            border
            style="width: 100%"
            :header-cell-style="headStyleFun"
            empty-text="暂无数据"
          >
            <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
            <el-table-column align="center" prop="sort_time_string" label="审结日期" min-width="140"></el-table-column>
            <el-table-column align="center" prop="data_type_str" label="类型" min-width="120"></el-table-column>
            <el-table-column align="center" prop="summary" label="摘要说明" min-width="180"></el-table-column>
            <el-table-column align="center" prop="compatibility" label="匹配度" min-width="90"></el-table-column>
            <!-- <el-table-column label="文书详情" width="120">
              <template slot-scope="scope">
                <el-button type="text" size="small">查看详情</el-button>
              </template>
            </el-table-column>-->
          </el-table>
        </div>
        <div class="data-box">
          <div class="box-title">位置聚焦</div>
          <div class="table-box">
            <table width="100%" cellspacing="0">
              <tr>
                <th></th>
                <th>近3天</th>
                <th>近7天</th>
                <th>近1个月</th>
                <th>近3个月</th>
                <th>近6个月</th>
              </tr>
              <tr>
                <td>近100m同经纬度用户数</td>
                <td>{{location.d3_100_count}}</td>
                <td>{{location.d7_100_count}}</td>
                <td>{{location.d30_100_count}}</td>
                <td>{{location.d90_100_count}}</td>
                <td>{{location.d180_100_count}}</td>
              </tr>
              <tr>
                <td>近1000m同经纬度用户数</td>
                <td>{{location.d3_1000_count}}</td>
                <td>{{location.d7_1000_count}}</td>
                <td>{{location.d30_1000_count}}</td>
                <td>{{location.d90_1000_count}}</td>
                <td>{{location.d180_1000_count}}</td>
              </tr>
              <tr>
                <td>近10000m同经纬度用户数</td>
                <td>{{location.d3_10000_count}}</td>
                <td>{{location.d7_10000_count}}</td>
                <td>{{location.d30_10000_count}}</td>
                <td>{{location.d90_10000_count}}</td>
                <td>{{location.d180_10000_count}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getBigDataOption, strToNum } from './options'
import { getNewRiskData } from '@/api/order'
export default {
  props: ['editItem'],
  data() {
    return {
      dialogVisible: false,
      diaLoading: false,
      desItemStyle: {
        textAlign: 'center',
      },
      desLabelStyle: {
        textAlign: 'center',
        backgroundColor: '#f3f5fc',
        color: '#333',
      },
      chartDom: null,
      myChart: null,
      cphs: {},
      baseInfo: {}, //用户基本信息
      zfbLevel: {}, //宝系健康度
      focusListCheck: {}, //不良行为检测
      registerHistory: {}, //网贷评估记录-注册记录
      personalLoanF: {}, //网贷评估记录-放贷记录
      personalLoanS: {}, //网贷评估记录-申请记录
      personalLoanH: {}, //网贷评估记录-还款记录
      personalOverdueHistory: {}, //网贷评估记录-历史逾期记录
      personalLoanDemand: {}, //网贷评估记录-查询记录
      relevanceRiskCheck: {}, //关联风险检测
      location: {}, //位置聚焦
      identInfo: {}, //身份信息核验与运营商信息
      riskListCheck: {}, //风险名单检测
      rentHistory: {}, //历史租赁
      courtRiskInfoList: [], //法院风险信息
    }
  },
  computed: {
    // 在网时长
    timeOnline() {
      let result = this.identInfo.time_online
      if (result === '1') {
        return '[0,3)'
      } else if (result === '2') {
        return '[3,6)'
      } else if (result === '3') {
        return '[6,12)'
      } else if (result === '4') {
        return '[12,24)'
      } else if (result === '5') {
        return '[24,+)'
      } else if (result === '0') {
        return '查无此号或已注销'
      } else if (result === '-1') {
        return '不支持该运营商'
      } else if (result === '-999') {
        return '手机状态异常'
      }
    },
    // 运营商类型
    operatorType() {
      const obj = {
        CMCC: '移动',
        CUCC: '联通',
        CTCC: '电信',
      }
      return obj[this.identInfo.operator_type]
    },
    // 风险颜色
    riskColor() {
      let score = Number(this.cphs.score_norm_explain) || 0
      if (score >= 640) {
        return '#72d13d'
      } else if (score >= 620) {
        return '#36cfc8'
      } else if (score >= 605) {
        return '#41abff'
      } else if (score >= 585) {
        return '#feab40'
      } else {
        return '#fe4142'
      }
    },
    // 风险位移计算
    corsorMove() {
      let score = Number(this.cphs.score_norm_explain) || 0
      let move = 0
      if (score > 640) {
        move = ((750 - score) / 110) * 0.2
      } else if (score > 620) {
        move = ((640 - score) / 20) * 0.2 + 0.2
      } else if (score > 605) {
        move = ((620 - score) / 15) * 0.2 + 0.4
      } else if (score > 585) {
        move = ((605 - score) / 20) * 0.2 + 0.6
      } else {
        move = ((585 - score) / 135) * 0.2 + 0.8
      }
      return move * 100 + '%'
    },
    // 金额区间
    overMoney() {
      let money = this.personalOverdueHistory.overdue_money
      let result = '--'
      switch (money) {
        case '1':
          result = '（0-500）'
          break
        case '2':
          result = '【500-1000）'
          break
        case '3':
          result = '【1000-2000）'
          break
        case '4':
          result = '【2000-3000）'
          break
        case '5':
          result = '【3000-5000）'
          break
        case '6':
          result = '【5000-10000）'
          break
        case '7':
          result = '【10000-20000）'
          break
        case '8':
          result = '【20000-30000）'
          break
        case '9':
          result = '【30000-50000）'
          break
        case '10':
          result = '【50000-100000）'
          break
        case '11':
          result = '【100000-200000）'
          break
        case '12':
          result = '【200000-300000）'
          break
        case '13':
          result = '【300000-500000）'
          break
        case '14':
          result = '【500000-1000000）'
          break
        case '15':
          result = '【1000000-∞）'
          break
        case '0':
          result = '0'
          break
        default:
          result = '--'
          break
      }
      return result
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getNewRiskDataFun()
      }
    },
  },
  methods: {
    headStyleFun() {
      return 'text-align: center;background:#f3f5fc;color:#333;'
    },
    gradeEchartsInit(num) {
      if (!this.chartDom) {
        this.chartDom = document.getElementById('grade')
        this.myChart = echarts.init(this.chartDom)
      }
      let options = getBigDataOption(num) || ''
      options && this.myChart.setOption(options)
    },
    async getNewRiskDataFun() {
      this.diaLoading = true
      const res = await getNewRiskData(this.editItem).catch((e) => {
        this.$message.error('查询失败!')
        this.diaLoading = false
      })
      const respData = res.resp_data
      this.baseInfo = respData.base_info || {}
      if (respData.zfb_level && respData.zfb_level.level) {
        this.zfbLevel = respData.zfb_level
        let gradeNum = strToNum(respData.zfb_level.level)
        this.gradeEchartsInit(gradeNum)
      }
      this.location = respData.location || {}
      this.identInfo = respData.ident_info_dict || {}
      this.focusListCheck = respData.focus_list_check || {}
      this.personalLoanF = respData.personal_loan_f || {}
      this.personalLoanH = respData.personal_loan_h || {}
      this.personalLoanS = respData.personal_loan_s || {}
      if (respData.cphs) {
        this.cphs = respData.cphs
        if (this.cphs.hit_risk_tagging && this.cphs.hit_risk_tagging.length) {
          this.cphs.hit_risk_tagging = this.cphs.hit_risk_tagging.map((item) => {
            let obj = { summary: item }
            return obj
          })
        } else this.cphs.hit_risk_tagging = []
      }
      if (respData.personal_overdue_history) {
        this.personalOverdueHistory = respData.personal_overdue_history
        if (this.personalOverdueHistory.datalist && this.personalOverdueHistory.datalist.length) {
          this.personalOverdueHistory.datalist = this.personalOverdueHistory.datalist.map((item) => {
            item.settlementstr = item.settlement === 'N' ? '否' : '是'
            return item
          })
        } else this.personalOverdueHistory.datalist = []
      }
      this.registerHistory = respData.register_history || {}
      this.riskListCheck = respData.risk_list_check || {}
      this.relevanceRiskCheck = respData.relevance_risk_check || {}
      this.rentHistory = respData.rent_history || {}
      this.personalLoanDemand = respData.personal_loan_demand || {}
      if (respData.court_risk_info_list && respData.court_risk_info_list.length) {
        const obj = {
          cpws: '裁判文书',
          ktgg: '开庭公告',
          ajlc: '案件流程信息',
          fygg: '法院公告',
          shixin: '失信公告',
          zxgg: '执行公告',
          bgt: '曝光台',
        }
        this.courtRiskInfoList = respData.court_risk_info_list.map((item) => {
          item.data_type_str = obj[item.data_type]
          return item
        })
      } else this.courtRiskInfoList = []
      this.diaLoading = false
    },
  },
}
</script>

<style lang="scss">
.bigdata-box {
  padding: 20px 10px;
  height: calc(99vh - 120px);
  overflow-y: auto;
  .process-box {
    .cursor-box {
      position: relative;
      left: -24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .cursor {
        width: 48px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #fff;
        background: pink;
        border-radius: 5px;
      }
      .cursor-icon {
        border: 5px solid transparent;
        border-top: 5px solid pink;
      }
    }
    .process-line {
      .process-cd {
        height: 40px;
        line-height: 40px;
        text-align: center;
        position: relative;
      }
      .cd-1 {
        &::before {
          content: '750';
          color: #606266;
          display: block;
          position: absolute;
          bottom: -100%;
          left: 0;
        }
      }
      .cd-2 {
        &::before {
          content: '640';
          color: #606266;
          display: block;
          position: absolute;
          bottom: -100%;
          left: -13px;
        }
      }
      .cd-3 {
        &::before {
          content: '620';
          color: #606266;
          display: block;
          position: absolute;
          bottom: -100%;
          left: -13px;
        }
      }
      .cd-4 {
        &::before {
          content: '605';
          color: #606266;
          display: block;
          position: absolute;
          bottom: -100%;
          left: -13px;
        }
      }
      .cd-5 {
        &::before {
          content: '585';
          color: #606266;
          display: block;
          position: absolute;
          bottom: -100%;
          left: -13px;
        }
        &::after {
          content: '450';
          color: #606266;
          display: block;
          position: absolute;
          bottom: -100%;
          right: 0;
        }
      }
    }
  }
  .box-title {
    font-size: 18px;
    color: #000;
    margin: 30px 0 10px 0;
  }
  #grade {
    width: 30%;
    height: 250px;
  }
  .data-box {
    .my-flex {
      column-gap: 20px;
      align-items: center;
    }
  }
  .risk-agree {
    margin: 10px 0;
    color: #333;
    span {
      font-size: 20px;
    }
  }
  .t-box {
    font-size: 16px;
    margin: 18px 0 10px 0;
    .title {
      width: 4px;
      height: 18px;
      background-color: blue;
      margin-right: 6px;
    }
  }
  .table-box {
    table {
      color: #333;
      border: 1px solid #ebeef5;
      margin: 12px 0;
      th {
        background-color: #f3f5fc;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border: 1px solid #ebeef5;
        font-weight: normal;
        font-size: 14px;
      }
      td {
        height: 45px;
        line-height: 45px;
        text-align: center;
        border: 1px solid #ebeef5;
      }
    }
  }
}
</style>